<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
  <div class="frame_edit">
    <!--水平导航列表-->
    <div class="navigation_list">
      <n-button type="" @click="onCreateNewPage">+</n-button>
      <div class="list_bar_tag h_h_overflow">
        <div class="navigation_button" v-for="Item in Store.pages" :class="[Store.pageKey === Item.key ? 'h_active' : '']"
          @click="onSetCurrentPage(Item.key)">
          {{ Item.label }}
        </div>
      </div>
    </div>
    <!-- 标尺 -->
    <panel-rule>
      <!--嵌入板-画布-->
      <template v-slot:SlotCanvas>
        <panel-canvas></panel-canvas>
      </template>
      <!--嵌入板-格栅-->
      <template v-slot:SlotGrid>
        <panel-grid></panel-grid>
      </template>
    </panel-rule>
    <slot name="downView"></slot>
  </div>
</template>

<script setup lang="ts">
/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */
import { reactive, computed } from "vue";
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 组件引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { panelRule } from "@/views/svg/PanelRule";
import { PanelCanvas } from "@/views/svg/PanelCanvas";
import { panelGrid } from "@/views/svg/PanelGrid";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 图元端函数引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import {
  // 🌱 画布
  onCreateNewPage,
  onSetCurrentPage,
} from "@/functions";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { useProjectStore } from "@/store/projectStore"; // 工程
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 使用存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
const projectStore = useProjectStore(); // 工程

/* ================================================================================================ */
//                                变量
/* ================================================================================================ */
/** 存储 */
let Store = reactive({
  /** 页面 */
  pages: computed(() => projectStore.pages),
  /** 页面键 */
  pageKey: computed(() => projectStore.pages[projectStore.pageIndex].key),
});

</script>

<style lang="scss" scoped>
/* 引入共用css */
@import "@/assets/h.scss";

// 编辑框
.frame_edit {
  background-color: #000000;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

/* 水平导航列表 */
.navigation_list {
  margin: 0px;
  padding: 0px;
  height: 40px;
  width: 100%;
  user-select: none;
  background-color: rgb(0, 0, 0);
  display: flex;
  flex-direction: row;
  justify-content: start;
}

// 列表条标签
.list_bar_tag {
  margin: 0px;
  padding: 0px;
  height: 40px;
  width: 60vw;
  user-select: none;
  background-color: rgb(0, 0, 0);
  display: flex;
  flex-direction: row;
  justify-content: start;
}

// 水平导航按钮
.navigation_button {
  margin-left: 0px;
  margin-right: 3px;
  padding: 0px;
  min-width: 70px;
  height: 26px;
  font-size: medium;
  text-align: center;
  background-color: rgb(80, 80, 80);
  color: rgb(218, 218, 218);
  border-bottom: 3px solid rgb(80, 80, 80);
  cursor: pointer; // 小手指

  &:hover {
    color: rgb(0, 0, 0);
  }
}

// 激活
.h_active {
  background-color: rgb(118, 118, 118);
  color: rgb(0, 0, 0);
  border-bottom: 3px solid #1d9f00;
}
</style>
